<template>
  <div class="app-container">
    <div>
      <aside>车辆长度</aside>

      <div class="filter-container" style="margin: 20px;">
        <el-button
          class="el-button filter-item el-button--primary el-button--medium"
          type="primary"
          @click="handleFilter(4)"
        >添加</el-button>
        <el-button
          class="el-button filter-item el-button--primary el-button--medium"
          type="primary"
          @click="deleteSet(4)"
        >删除</el-button>
      </div>
      <div>
        <el-row>
          <div v-for="item in level4" :key="item.id">
            <el-col :span="3">
              <div
                class="grid-content bg-purple-dark chooseClass"
                :class="chooseData['level4'].indexOf(item.id)!=-1?'chooseData':''"
                @click="choose(item.id,'level4')"
              >{{ item.content }}</div>
            </el-col>
          </div>
        </el-row>
      </div>
    </div>
    <div style="margin-top:28px">
      <aside>车辆车型</aside>

      <div class="filter-container" style="margin: 20px;">
        <el-button
          class="el-button filter-item el-button--primary el-button--medium"
          type="primary"
          @click="handleFilter(5)"
        >添加</el-button>
        <el-button
          class="el-button filter-item el-button--primary el-button--medium"
          type="primary"
          @click="deleteSet(5)"
        >删除</el-button>
      </div>
      <div>
        <el-row>
          <div v-for="item in level5" :key="item.id">
            <el-col :span="3">
              <div
                class="grid-content bg-purple-dark chooseClass"
                :class="chooseData['level5'].indexOf(item.id)!=-1?'chooseData':''"
                @click="choose(item.id,'level5')"
              >{{ item.content }}</div>
            </el-col>
          </div>
        </el-row>
      </div>
      <!-- <el-table
        v-loading="listLoading"
        :data="level5"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column align="center" label="ID" width="150">
          <template slot-scope="{row}">
            <span>{{ row.id }}</span>
          </template>
        </el-table-column>

        <el-table-column width="150" align="center" label="名称">
          <template slot-scope="{row}">
            <span>{{ row.content }}</span>
          </template>
        </el-table-column>
        <el-table-column width="250" align="center" label="创建时间">
          <template slot-scope="{row}">
            <span>{{ row.createTime }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="操作" width="120">
          <template slot-scope="{row}">
            <el-button type="primary" size="small" @click="deleteSet(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table> -->
    </div>
    <div style="margin-top:28px">
      <aside>车辆载重</aside>

      <div class="filter-container" style="margin: 20px;">
        <el-button
          class="el-button filter-item el-button--primary el-button--medium"
          type="primary"
          @click="handleFilter(6)"
        >添加</el-button>

        <el-button
          class="el-button filter-item el-button--primary el-button--medium"
          type="primary"
          @click="deleteSet(6)"
        >删除</el-button>
      </div>

      <div>
        <el-row>
          <div v-for="item in level6" :key="item.id">
            <el-col :span="3">
              <div
                class="grid-content bg-purple-dark chooseClass"
                :class="chooseData['level6'].indexOf(item.id)!=-1?'chooseData':''"
                @click="choose(item.id,'level6')"
              >{{ item.content }}</div>
            </el-col>
          </div>
        </el-row>
      </div>
    </div>
    <div style="margin-top:28px">
      <aside>用车类型</aside>
      <!--
      <div class="filter-container" style="margin: 20px;">
        <el-button
          class="el-button filter-item el-button--primary el-button--medium"
          type="primary"
          @click="handleFilter(7)"
        >添加</el-button>

        <el-button
          class="el-button filter-item el-button--primary el-button--medium"
          type="primary"
          @click="deleteSet(7)"
        >删除</el-button>
      </div> -->

      <div>
        <el-row>
          <div v-for="item in level7" :key="item.id">
            <el-col :span="3">
              <div
                class="grid-content bg-purple-dark chooseClass"
                :class="chooseData['level7'].indexOf(item.id)!=-1?'chooseData':''"
                @click="choose(item.id,'level7')"
              >{{ item.content }}</div>
            </el-col>
          </div>
        </el-row>
      </div>
    </div>
    <el-dialog ref="drag-dialog" :visible.sync="dialogTableVisible" title="添加">
      <div>
        <el-form :model="form" label-width="80px" label-position="left">
          <el-form-item label="名称">
            <el-input v-model="form.content" placeholder="名称" />
          </el-form-item>

          <div style="text-align:right;">
            <el-button type="danger" @click="dialogTableVisible=false">关闭</el-button>
            <el-button type="primary" @click="onSubmit">提交</el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getSetting, deleteSetting, addSetting } from '@/api/order'
import clip from '@/utils/clipboard' // use clipboard directly
import clipboard from '@/directive/clipboard/index.js' // use clipboard by v-directive

export default {
  name: 'ClipboardDemo',
  directives: {
    clipboard
  },

  data() {
    return {
      inputData: 'https://github.com/PanJiaChen/vue-element-admin',
      inputDataD: 'https://github.com/PanJiaChen/vue-element-admin33',
      dialogTableVisible: false,
      listLoading: true,
      temp: {
        id: undefined,
        importance: 1,
        remark: '',
        timestamp: new Date(),
        title: '',
        type: '',
        status: 'published'
      },
      form: {
        content: '',
        level: '',
        type: 2
      },
      level4: [],
      level5: [],
      level6: [],
      level7: [],
      chooseData: {
        level4: [],
        level5: [],
        level6: [],
        level7: []
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleCopy(text, event) {
      clip(text, event)
    },
    clipboardSuccess() {
      this.$message({
        message: 'Copy successfully',
        type: 'success',
        duration: 1500
      })
    },
    getList() {
      this.listLoading = true
      getSetting().then(response => {
        this.level4 = response.result[3].infos
        this.level5 = response.result[4].infos
        this.level6 = response.result[5].infos
        this.level7 = response.result[6].infos

        this.$forceUpdate()
        // Just to simulate the time of the request
        // setTimeout(() => {
        //   this.listLoading = false
        // }, 1.5 * 1000)
      })
    },
    handleFilter(level) {
      console.log(level)
      this.form.level = level
      // var dialogTableVisible = !this.dialogTableVisible
      this.dialogTableVisible = !this.dialogTableVisible
    },
    deleteSet(level) {
      var levelId = 'level' + level
      for (const id in this.chooseData[levelId]) {
        // console.log()
        deleteSetting(this.chooseData[levelId][id]).then(response => {
        })
      }
      this.getList()
    },
    onSubmit() {
      addSetting(this.form).then(response => {
        this.form.content = ''
        this.getList()
        this.dialogTableVisible = false
      })
      console.log(this.form)
    },
    choose(id, level) {
      if (this.chooseData[level].indexOf(id) === -1) {
        this.chooseData[level].push(id)
      } else {
        this.chooseData[level].splice(this.chooseData[level].indexOf(id), 1)
      }
      console.log(this.chooseData)
    }
  }
}
</script>

<style scoped>
.el-col-3{
  min-width: 50px;
}
.chooseClass {
  line-height: 22px;
  margin: 5px;
  border: 1px solid;
  text-align: center;
}
.chooseData{
  border:1px solid #409EFF;
  color: #409EFF;
}
</style>
